<template>
  <div>
    <div class="flex space-x-3">
      <RemoteAvatar size="large" :url="item.fromAvatar"></RemoteAvatar>
      <div class="flex-1">
        <div class="text-gray-400 font-bold">
          {{ item.fromUsername }}
        </div>
        <div class="text-gray-500 truncate">
          发表于{{ dayjs(item.createdAt).fromNow() }}
        </div>
      </div>
      <div>
        <div class="flex space-x-3">
          <n-button text @click="handleCopy(item.content)">
            <TextIcon icon="ph:copy-bold" text="复制" :size="15"></TextIcon>
          </n-button>
          <n-button text>
            <TextIcon icon="mdi:thumb-up-outline" :size="15">
              <template #text>
                {{ item.likes === 0 || !item.likes ? '点赞' : item.likes }}
              </template>
            </TextIcon>
          </n-button>

          <n-button v-if="!isShow" text @click="handleReply">
            <TextIcon icon="carbon:mail-reply" text="回复" :size="15"></TextIcon>
          </n-button>
          <n-button type="warning" v-else text @click="isShow=false">
            <TextIcon icon="tabler:mail-cancel" text="取消回复" :size="15"></TextIcon>
          </n-button>
        </div>
      </div>
    </div>

    <div class="text-lg  ml-4">
      {{ item.content }}
    </div>
    <div ref="target" v-if="isShow">
      <ReplyInput ref="replyInputRef"
                  @replySuccess="replySuccess"
                  :comment-id="item.id"
                  :to-avatar="item.fromAvatar"
                  :to-id="item.fromId"
                  :to-username="item.fromUsername"
                  :to-content="item.content"></ReplyInput>
    </div>
  </div>
  <div v-if="item.replyList.length" class="pl-14 py-1">
    <div v-for="(it,index) in item.replyList">
      <ReplyItem @replySuccess="replySuccess" :item="it" :key="index"></ReplyItem>
    </div>
  </div>

</template>

<script setup lang="ts">
import {nextTick, PropType, ref} from "vue";
import RemoteAvatar from "@/components/pc/avatar/RemoteAvatar.vue";
import dayjs from "@/utils/dayjs";
import TextIcon from "@/components/pc/icon/TextIcon.vue";
import {useClipboard} from "@vueuse/core";
import ReplyInput from "@/components/pc/input/ReplyInput.vue";
import {onClickOutside} from '@vueuse/core'
import ReplyItem from "@/components/pc/item/ReplyItem.vue";

const {copy} = useClipboard()
const props =defineProps({
  item: {
    type: Object as PropType<IComment>,
    default: () => ({})
  }
})
const replyInputRef = ref()
const isShow = ref(false)
const target = ref()


onClickOutside(target, () => isShow.value = false)
const handleCopy = (val: string) => {
  window.$message.success('复制成功')
  copy(val)
}
const handleReply = () => {
  isShow.value = true
  nextTick(() => {
    replyInputRef.value.doInputFocus()
  })
}
const replySuccess=(val:any)=>{
  props.item.replyList.unshift(val)
}

</script>

<style scoped>

</style>